<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>图表选项卡</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="echarts.min.js"></script>
</head>
<style type="text/css">
    .myTable-container {
        width: 800px;
        height: 430px;
    }
</style>
<body>
<div class="container" style="padding-top: 5%; padding-left: 10%">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane  active" id="tab1">
            <div id="tab1-container" class="myTable-container"></div>
        </div>
        <div class="tab-pane " id="tab2">
            <div id="tab2-container" class="myTable-container"></div>
        </div>
        <div class="tab-pane " id="tab3">
            <div id="tab3-container" class="myTable-container"></div>
        </div>
    </div>
</div>
<script>
    var $tab1 = document.getElementById('tab1-container');
    var $tab2 = document.getElementById('tab2-container');
    var $tab3 = document.getElementById('tab3-container');

    /* 折线图 */
    var tab1Option = {
        xAxis : {
            type : 'category',
            data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
        },
        yAxis : {
            type : 'value'
        },
        series : [ {
            data : [ 820, 932, 901, 934, 1290, 1330, 1320 ],
            type : 'line'
        } ]
    };

    /* 饼图 */
    var tab2Option = {
        title : {
            text : '某站点用户访问来源',
            subtext : '纯属虚构',
            x : 'center'
        },
        tooltip : {
            trigger : 'item',
            formatter : "{a} <br/>{b} : {c} ({d}%)"
        },
        legend : {
            orient : 'vertical',
            left : 'left',
            data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]
        },
        series : [ {
            name : '访问来源',
            type : 'pie',
            radius : '55%',
            center : [ '50%', '60%' ],
            data : [ {
                value : 335,
                name : '直接访问'
            }, {
                value : 310,
                name : '邮件营销'
            }, {
                value : 234,
                name : '联盟广告'
            }, {
                value : 135,
                name : '视频广告'
            }, {
                value : 1548,
                name : '搜索引擎'
            } ],
            itemStyle : {
                emphasis : {
                    shadowBlur : 10,
                    shadowOffsetX : 0,
                    shadowColor : 'rgba(0, 0, 0, 0.5)'
                }
            }
        } ]
    };

    /* 柱图  */
    var tab3Option = {
        xAxis : {
            type : 'category',
            data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
        },
        yAxis : {
            type : 'value'
        },
        series : [ {
            data : [ 120, 200, 150, 80, 70, 110, 130 ],
            type : 'bar'
        } ]
    };

    /* 初始化tab1的 */
    var tab1Table = echarts.init($tab1);
    tab1Table.setOption(tab1Option);

    /* shown.bs.tab为tab选项卡高亮 */
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        /* 获取已激活的标签页的名称 */
        /* hash 属性是一个可读可写的字符串，该字符串是 URL 从 # 号开始的部分 */
        var activeTab = $(e.target)[0].hash;
        /* 当相应的标签被点击时，进行对应的图表渲染 */
        if (activeTab == "#tab2") {
            /* 释放图表实例，使实例不可用,不加上这个，会报错： */
            /* there is a chart instance     already initialized on the dom */
            echarts.dispose($tab2);
            var tab2Table = echarts.init($tab2);
            tab2Table.setOption(tab2Option);
        } else if (activeTab == "#tab3") {
            echarts.dispose($tab3);
            var tab3Table = echarts.init($tab3);
            tab3Table.setOption(tab3Option);
        }
    });
</script>
</body>
</html>